<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>现实中的文字效果</title>
    <link rel="stylesheet" href="../public.css">
    <style>
        .box {
            width: 80%;
            padding: 20px;
            margin: 20px auto;
            text-align: center;
            background: hsl(210, 13%, 60%);
            color: hsl(210, 13%, 30%);
        }

        .back {
            text-shadow: 0 1px 1px hsla(0, 0%, 100%, .8);
        }

        .back1 {
            text-shadow: 0 .03em .03em hsla(0, 0%, 100%, .8);
        }

        .back2 {
            background: deeppink;
            color: white;
            font-size: 32px;
            text-shadow: 1px 1px black, -1px -1px black, 1px -1px black, -1px 1px black;
        }

        .back4 {
            background: deeppink;
            color: white;
            font-size: 32px;
            text-shadow: 3px 3px black, -3px -3px black, 3px -3px black, -3px 3px black;
        }

        .back3 {
            background: deeppink;
            color: white;
            font-size: 32px;
            text-shadow: 0 0 1px black, 0 0 1px black,
                0 0 1px black, 0 0 1px black,
                0 0 1px black, 0 0 1px black;
        }

        .back5 h1 {
            font: 500%/1 Rockwell, serif;
            background: deeppink;
            color: white;
        }

        .back5 h1 text {
            fill: currentColor;
        }

        .back5 h1 svg {
            overflow: visible
        }

        .back5 h1 use {
            stroke: black;
            stroke-width: 6;
            stroke-linejoin: round;
        }

        .back6 {
            background: #203;
            color: #ffc;
            text-shadow: 0 0 .1em, 0 0 .3em;
        }

        .back7 {
            background: #203;
            color: #ffc;
            transition: 1s;
        }

        .back7:hover {
            /* color:transparent; */
            /* text-shadow: 0 0 .1em white, 0 0 .3em white; */
            text-shadow: 0 0 .1em, 0 0 .3em;
        }

        .back8 {
            background: #58a;
            color: white;
            font-size: 32px;
            text-shadow: 0 1px hsl(0, 0%, 85%),
                0 2px hsl(0, 0%, 80%),
                0 3px hsl(0, 0%, 75%),
                0 4px hsl(0, 0%, 70%),
                0 5px hsl(0, 0%, 65%),
                0 5px 10px black;
        }

        .back9 {
            color: white;
            background: hsl(0, 50%, 45%);
            text-shadow: 1px 1px black, 2px 2px black,
                3px 3px black, 4px 4px black,
                5px 5px black, 6px 6px black,
                7px 7px black, 8px 8px black;
        }
    </style>
</head>

<body>
    <div class="content">
        <h1>凸版印刷效果</h1>
        <ul>
            <li>在文字底部的浅色投影(或者出现在顶部的暗色投影)会让人产生物体凹进平面内的错觉</li>
            <li>在文字底部的深色投影(或者出现在顶部的浅色投影)会让人产生物体从平面上凸起的错觉</li>
        </ul>
        <div class="box  back">
            The beta version of the digital yuan wallet app went live on Apple's App Store and Android app stores on
            Tuesday, ready for the broad use by domestic and international customers during the upcoming Beijing Winter
            Olympics
        </div>
        <div class="box  back1">
            The beta version of the digital yuan wallet app went live on Apple's App Store and Android app stores on
            Tuesday, ready for the broad use by domestic and international customers during the upcoming Beijing Winter
            Olympics
        </div>
    </div>
    <div class="content">
        <h1>空心字体</h1>
        <ul>
            <li>这种通过文字模糊实现空心文字，但是使用了模糊算法，性能消耗较高</li>
            <li>描边越粗，产生的结果越差</li>
        </ul>
        <div class="box  back2">
            HTML
        </div>
        <div class="box  back3">
            CSS
        </div>
        <div class="box  back4">
            CSS3
        </div>
        <h1>svg</h1>
        <div class="box  back5">
            <h1>
                <svg width="2em" height="1.2em">
                    <use xlink:href="#css" />
                    <text id="css" y="1em">CSS</text>
                </svg>
            </h1>
        </div>

    </div>
    <div class="content">
        <h1>文字外发光效果</h1>
        <div class="box back6">
            Glow
        </div>
        <div class="box back7">
            Glow
        </div>
    </div>
    <div class="content">
        <h1>文字凸起效果</h1>
        <div class="box back8">
            CSS3
        </div>
        <div class="box back9">
            RETRO
        </div>
    </div>
</body>

</html>